<template>
  <el-dialog
    :title="ruleForm.dialogName"
    :visible.sync="showEdit"
    :close-on-click-modal="false"
    width="550px"
    center
    @close="close"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="flex flex_center"
    >
      <el-form-item
        v-for="item in ruleList"
        :key="item.title"
        :label="item.title"
        :prop="item.field"
      >
        <el-input
          v-if="!item.option"
          :type="item.type"
          v-model="ruleForm[item.field]"
          clearable
          :disabled="item.field == 'enumType' && ruleForm.id"
          placeholder="请输入"
        ></el-input>
        <el-select
          v-else
          v-model="ruleForm[item.field]"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="(it, Index) in infolist[item.option]"
            :key="Index"
            :label="it.text"
            :value="Number(it.value)"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button type="danger" @click="close()">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showEdit: Boolean,
    infolist: Object,
    ruleForm: Object,
  },
  data() {
    return {
      ruleList: [
        { title: "字典类型", field: "enumType" },
        { title: "字典值", field: "value" },
        { title: "显示名称", field: "text" },
        { title: "排序编号", field: "shortNo" ,type:"number"},
        { title: "状态", field: "status", option: "status" },
      ],
      rules: {},
    };
  },
  created() {
    this.ruleList.forEach((element) => {
      this.rules[element.field] = [
        { required: true, message: `${element.title}不能为空` },
      ];
    });
  },
  mounted() {},
  computed: {},
  watch: {
    ruleForm(val) {
        // 监听变化的值,及时校验输入看数据
      if (!this.ruleForm.id && this.$refs["ruleForm"]) {
        this.resetForm("ruleForm");
      }
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // valid 表示输入框的校验结果,校验通过返回true
        if (valid) {
            this.saveOrUpdateDic();
        } else {
          return false;
        }
      });
    },
    async saveOrUpdateDic() {
        let result = await this.$api.dic.saveOrUpdateDic(this.ruleForm)
        if (result.code == '100') {
            // 成功消息提示
            this.$message.success("添加成功");
            // 关闭窗口
            this.close('insert');
          }else{
            if (result.message) this.$message.error(result.message);
          }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    close(val) {
      let data = {name: "showEdit", isRefresh: val};
      // 子组件向父组件通信
      this.$emit("close", data);
      this.resetForm("ruleForm");
    },
  },
};
</script>
<style scoped>
</style>